<template>
  <div id="productAnalysisHeader">
    <div class="fl">
      <div class="group">
        <div class="title">Group By</div>
        <el-select v-model="group"
                   @change="groupByChange"
                   placeholder="Select">
          <el-option v-for="item in groupArr"
                     :label="item.label"
                     :value="item.value"
                     :key="item.value"></el-option>
        </el-select>
      </div>
      <div class="tab-img">
        <div class="title"></div>
        <div class="icon-wrap">
          <i class="iconfont icon-exchange"
             @click="exchange"></i>
        </div>
      </div>
      <div class="split">
        <div class="title">Split On</div>
        <el-select v-model="split"
                   @change="splitOnChange"
                   placeholder="Select">
          <el-option v-for="item in splitArr"
                     :label="item.label"
                     :value="item.value"
                     :key="item.value"></el-option>
        </el-select>
      </div>
      <div v-if="percentShow">
        <div class="title">View</div>
        <el-radio-group v-model="radio1"
                        @change="radio1Change">
          <el-radio-button label="Charts"></el-radio-button>
          <el-radio-button label="Table"
                           ></el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="percentShow">
        <div class="title">View</div>
        <el-radio-group v-model="radio2"
                        @change="radio2Change">
          <el-radio-button label="Counts"></el-radio-button>
          <el-radio-button label="Percentage"></el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="yearShow">
        <div class="title">Time</div>
        <el-select v-model="year"
                   @change="timeChange"
                   placeholder="Select">
          <el-option v-for="year in years"
                     :key="year"
                     :value="year"
                     :label="year"></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      group: "retailer",
      split: "brands",
      keyWords: "",
      active: 1,
      radio1: "Charts",
      radio2: "Counts",
      typeArray: [
        { value: "country", label: "Country" },
        { value: "retailer", label: "Retailer" },
        { value: "brands", label: "Brands" }
      ],
      groupArr: [],
      splitArr: [],
      years: [2013, 2014, 2015, 2016, 2017, 2018],
      year: 2017
    };
  },
  created() {
    this.groupArr = this.typeArray;
    this.splitArr = this.typeArray;
  },
  computed: {
    yearShow() {
      switch (this.chartShow) {
        case "newIn":
          return true;
      }
    },
    percentShow() {
      switch (this.chartShow) {
        case "series":
        case "material":
        case "color":
        case "type":
          return true;
      }
    },
    ...mapGetters(["productShow", "chartShow"])
  },
  methods: {
    keyWordsChange() {},
    splitOnChange(val) {
      if (this.group === this.split) {
        this.group = "";
      }
      if (this.group && this.split) {
        this.$emit("changeGroupOrSplit", {
          group: this.group,
          split: this.split
        });
      }
    },
    exchange() {
      [this.group, this.split] = [this.split, this.group];
      this.$emit("changeGroupOrSplit", {
        group: this.group,
        split: this.split
      });
    },
    groupByChange(val) {
      if (this.group === this.split) {
        this.split = "";
      }
      if (this.group && this.split) {
        this.$emit("changeGroupOrSplit", {
          group: this.group,
          split: this.split
        });
      }
    },
    radio1Change(val) {
      this.$emit("radio1Change", val);
    },
    radio2Change(val) {
      this.$emit("radio2Change", val);
    },
    timeChange(val) {
      this.$emit("timeChange", val);
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/styles/color.scss";
@import "../../../assets/styles/mixins.scss";
#productAnalysisHeader {
  @include clearfix();
  margin-top: 5px;
  margin-bottom: 10px;
  border-bottom: 2px solid #d3d3d8;
  box-shadow: 0 1px rgba(255, 255, 255, 0.4);
  .fl {
    margin-left: 0.5rem;
    margin-bottom: 10px;
    display: flex;
    & > div {
      margin-right: 20px;
    }
    .group {
      margin-right: 10px;
    }
    .tab-img {
      margin-right: 10px;
      .title {
        height: 0.85rem;
      }
      .icon-wrap {
        margin-top: 10px;
        .iconfont {
          font-size: 25px;
          &:hover {
            color: $base;
            cursor: pointer;
          }
        }
      }
    }
    .title {
      text-align: left;
      text-indent: 10px;
      font-size: 0.7rem;
      margin-bottom: 5px;
    }
    .el-select {
      .el-input__inner {
        height: 34px !important;
      }
    }
    .el-radio-button__inner {
      padding: 0 8px;
      height: 34px;
      line-height: 34px;
    }
  }
}

.el-scrollbar {
  .el-scrollbar__wrap {
    overflow: hidden !important;
    margin-bottom: -10px !important;
    ul.el-select-dropdown__list {
      li.el-select-dropdown__item {
        height: 34px;
        line-height: 34px;
        &:last-of-type {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
